import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "@/contexts/ThemeContext";

interface TabItemProps {
  icon: string;
  activeIcon: string;
  label: string;
  isActive: boolean;
  onPress: () => void;
  textColor: string;
  activeColor: string;
  badge?: number;
}

const TabItem: React.FC<TabItemProps> = ({
  icon,
  activeIcon,
  label,
  isActive,
  onPress,
  textColor,
  activeColor,
  badge,
}) => {
  // 动画值 - 点击效果
  const scaleAnim = React.useRef(new Animated.Value(1)).current;
  const { colors } = useTheme();
  const [total, setTotal] = useState(10);
  const totalAdd = () => {
    setTotal(total + 1);
  };
  const startAnimation = () => {
    Animated.sequence([
      Animated.timing(scaleAnim, {
        toValue: 0.9,
        duration: 100,
        useNativeDriver: true,
      }),
      Animated.timing(scaleAnim, {
        toValue: 1,
        duration: 100,
        useNativeDriver: true,
      }),
    ]).start();
  };

  const handlePress = () => {
    startAnimation();
    onPress();
  };

  return (
    <TouchableOpacity
      style={styles.tabItemContainer}
      activeOpacity={0.7}
      onPress={handlePress}
    >
      <Animated.View
        style={[styles.tabItemContent, { transform: [{ scale: scaleAnim }] }]}
      >
        <View style={styles.iconContainer}>
          <Ionicons
            name={isActive ? (activeIcon as any) : (icon as any)}
            size={24}
            color={isActive ? activeColor : textColor}
          />
          {label === "信息" && (
            <View style={styles.badgeContainer}>
              <Text onPress={totalAdd} style={styles.badgeText}>
                {total.toString()}
              </Text>
            </View>
          )}
        </View>
        <Text
          style={[
            styles.tabLabel,
            { color: isActive ? activeColor : textColor },
          ]}
        >
          {label}
        </Text>
      </Animated.View>
    </TouchableOpacity>
  );
};

interface TabBarProps {
  tabs: {
    icon: string;
    activeIcon: string;
    label: string;
    badge?: number;
  }[];
  activeIndex: number;
  onTabPress: (index: number) => void;
}

const TabBar: React.FC<TabBarProps> = ({ tabs, activeIndex, onTabPress }) => {
  const insets = useSafeAreaInsets();
  const { colors } = useTheme();

  return (
    <View
      style={[
        styles.container,
        {
          paddingBottom: insets.bottom > 0 ? insets.bottom : 8,
          backgroundColor: colors.background,
          borderTopColor: colors.border.divider,
        },
      ]}
    >
      {tabs.map((tab, index) => (
        <TabItem
          key={index}
          icon={tab.icon}
          activeIcon={tab.activeIcon}
          label={tab.label}
          badge={tab.badge}
          isActive={activeIndex === index}
          onPress={() => onTabPress(index)}
          textColor={colors.text.secondary}
          activeColor={colors.primary}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    borderTopWidth: 0.5,
    paddingTop: 8,
  },
  tabItemContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  tabItemContent: {
    alignItems: "center",
    justifyContent: "center",
  },
  iconContainer: {
    position: "relative",
    width: 30,
    height: 30,
    alignItems: "center",
    justifyContent: "center",
  },
  badgeContainer: {
    position: "absolute",
    top: -5,
    right: -8,
    backgroundColor: "#FF3B30",
    borderRadius: 8,
    height: 16,
    minWidth: 16,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 4,
  },
  badgeText: {
    color: "white",
    fontSize: 10,
    fontWeight: "600",
  },
  tabLabel: {
    fontSize: 10,
    marginTop: 2,
    fontWeight: "500",
  },
});

export default TabBar;
